<card-layout body-css="md-padding">
  <header-section>
    <div layout="row" layout-align="space-between-center" flex>
      <div class="card-title" flex>Pre Step</div>
      <h2 class="card-sub-header">{{vm.stepNumber}} of {{vm.totalSteps}}</h2>
    </div>
    <div layout="row" layout-align="space-between-center" flex class="layout-padding-top">
      <div class="card-sub-header" flex>Form is required before continuing</div>
      <thinkbig-feed-errors-card-header></thinkbig-feed-errors-card-header>
    </div>
  </header-section>

  <body-section>

    <ng-form name="vm.form">
      <md-input-container class="md-block" flex-gt-sm>
        <label>Name</label>
        <input ng-model="vm.model.tableOption.preStepName" required>
        </input>
      </md-input-container>

      <md-input-container class="md-block" flex-gt-sm>
        <label>Age</label>
        <input name="preStepAge" ng-model="vm.model.tableOption.preStepAge" number required  ng-change="vm.ageChanged()">
        </input>
        <div ng-messages="vm.form.preStepAge.$error"  md-auto-hide="false">
          <div ng-message="required">Required.</div>
          <div ng-message="ageError">You must be at least 21 to continue.</div>
        </div>
      </md-input-container>

      <md-input-container class="md-block" flex-gt-sm>
        <label>Magic Word</label>
        <input  name="preStepMagicWord" ng-model="vm.model.tableOption.preStepMagicWord" required ng-change="vm.magicWordChanged()">
        </input>
        <div ng-messages="vm.form.preStepMagicWord.$error" >
          <div ng-message="required">Required.</div>
          <div ng-message="magicWordError">Incorrect Magic Word.... try 'kylo'</div>
        </div>
        <span class="hint">The magic word is 'kylo'</span>
      </md-input-container>

      <thinkbig-step-buttons can-continue="vm.form.$valid" step-index="{{::vm.stepIndex}}"></thinkbig-step-buttons>
    </ng-form>
  </body-section>
</card-layout>
